<template>
  <div :id="myId" :class="$attrs.class"></div>
</template>

<script lang="ts" setup>

import { ref, Ref, reactive, onBeforeMount, watch, toRaw, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts';

const props = defineProps<{
  myId: string;
  eventData: Array;
  sumTotal: string;
  subTital: string;
  pieColors: Array;
  layout: string;
}>()

const optionOne = {
  color: [],
  title: {
    text: '',
    left: 'center',
    top: 'center',
    subtext:''
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    icon: "rect",
    itemHeight: 15,
    itemWidth: 15,
    x: 'center',
    y: 'bottom',
    padding:[0,0,20,0]
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      // emphasis、labelLine、itemStyle为外围数据配置
      emphasis: {
        label: {
          show: true,
          fontSize: 22,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      itemStyle: {
        normal: {
          //label（图形文本标签）设置
          label: {
            //是否显示
            show: true,
            fontSize: 16,
            //模板变量有{a}，{b}，{c}，{d},{e}，分别表示系列名，数据名，数据值等。模板变量为固定值
            formatter: "{style_a|{b}}\n{c}",
            rich: {
              style_a: {
                color: 'black',
                fontSize: 16,
                lineHeight: 18
              }
            },
            color:'inherit'
          }
        }
      },
      data: []
    }
  ]
}
const optionTwo = {
  color: [],
  title: {
    text: '',
    left: 'center',
    top: 'center',
    subtext:''
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    icon: "circle",
    orient: 'vertical',
    right:10,
    y: 'center',
    itemHeight: 8,
    itemWidth: 8,
    formatter: function (name) {
      let data = optionTwo.series[0].data
      let tarValue
      for (let i = 0; i < data.length; i++) {
        if (data[i].name == name) {
          tarValue = data[i].value
        }
      }
      return `${name}   {b|${tarValue}}`
    },
    textStyle:{
      rich:{
        b:{
          fontSize:16,
          fontWeight: 'bolder'
        }
      }
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      data: []
    }
  ]
}
const show = () => {
  // 布局设置 Horizontal-横向，Vertical-纵向，后续根据原型添加其他布局
  if (props.layout === 'Horizontal') {
    optionOne.color = props.pieColors
    optionOne.title.text = props.sumTotal
    optionOne.title.subtext = props.subTital
    optionOne.series[0].data = props.eventData
    var myChart = echarts.init(document.getElementById(props.myId));
    myChart.setOption(optionOne);
  } else if(props.layout === 'Vertical') {
    optionTwo.color = props.pieColors
    optionTwo.title.text = props.sumTotal
    optionTwo.title.subtext = props.subTital
    optionTwo.series[0].data = props.eventData
    var myChart = echarts.init(document.getElementById(props.myId));
    myChart.setOption(optionTwo);
  } else {

  }
}
// 暴露该方法便于父组件调用
defineExpose({
  show
})
// 获取数据
// const getData = () => {
//
// }
onMounted(() => {
  show()
})
// onBeforeMount(getData)
</script>
<style lang="less" scoped>

</style>
